<template>
	<div class="dashboard">
		<!-- 顶部标题 -->
		<h1 class="dashboard-title">人事薪酬系统可视化大屏</h1>

		<!-- 整体布局采用 Grid 布局 -->
		<div class="dashboard-grid">
			<!-- 左侧区域 -->
			<div class="left-area">
				<!-- 人员统计 -->
				<div class="employee-stats panel">
					<h2 class="panel-title">人员统计</h2>
					<div class="employee-count">
						<div v-for="(item, index) in employeeCounts" :key="index" class="employee-item">
							<p class="employee-number">{{ item }}</p>
							<p class="employee-text">在职人员</p>
						</div>
					</div>
				</div>

				<!-- 各部门人员统计 -->
				<div class="department-stats panel">
					<h2 class="panel-title">各部门人员统计</h2>
					<div ref="departmentChart" class="chart"></div>
				</div>

				<!-- 能力结构统计 -->
				<div class="ability-stats panel">
					<h2 class="panel-title">能力结构统计</h2>
					<div ref="abilityChart" class="chart"></div>
				</div>
			</div>

			<!-- 中间区域 -->
			<div class="middle-area">
				<!-- 薪酬信息 -->
				<div class="salary-info panel">
					<div class="salary-box">
						<h2 class="salary-title">本月已发工资</h2>
						<p class="salary-amount">{{ monthlySalary }} 万元</p>
					</div>
					<div class="salary-box">
						<h2 class="salary-title">本季已发工资</h2>
						<p class="salary-amount">{{ quarterlySalary }} 万元</p>
					</div>
					<div class="salary-box">
						<h2 class="salary-title">本年已发工资</h2>
						<p class="salary-amount">{{ annualSalary }} 万元</p>
					</div>
				</div>

				<!-- 地图展示 (简易) -->
				<div class="map-container panel">
					<h2 class="panel-title">区域分布</h2>
					<div class="map">
						<!-- 这里可以加入地图组件，或者简单的图片 -->
						<p>地图展示区域</p>
					</div>
				</div>
			</div>

			<!-- 右侧区域 -->
			<div class="right-area">
				<!-- 部门人力成本 -->
				<div class="cost-stats panel">
					<h2 class="panel-title">部门人力成本</h2>
					<div ref="costChart" class="chart"></div>
				</div>

				<!-- 年龄、司龄、工龄结构 -->
				<div class="age-stats panel">
					<h2 class="panel-title">年龄、司龄、工龄结构</h2>
					<div class="info-boxes">
						<div class="info-box">
							<p class="info-label">平均年龄</p>
							<p class="info-value">{{ averageAge }} 岁</p>
						</div>
						<div class="info-box">
							<p class="info-label">平均司龄</p>
							<p class="info-value">{{ averageTenure }} 年</p>
						</div>
						<div class="info-box">
							<p class="info-label">平均工龄</p>
							<p class="info-value">{{ averageWorkYears }} 年</p>
						</div>
					</div>
					<div ref="ageChart" class="chart"></div>
				</div>

				<!-- 性别统计 -->
				<div class="gender-stats panel">
					<h2 class="panel-title">性别统计</h2>
					<div ref="genderChart" class="chart"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import type { EChartsOption } from "echarts";

// 数据 (这里用示例数据，替换成你的实际数据)
const monthlySalary = ref(38.0);
const quarterlySalary = ref(138.0);
const annualSalary = ref(688.0);

const employeeCounts = ref([384, 384, 384, 384, 384, 384]);

const averageAge = ref(37.5);
const averageTenure = ref(5.9);
const averageWorkYears = ref(12.65);

const departmentChart = ref(null);
const costChart = ref(null);
const ageChart = ref(null);
const abilityChart = ref(null);
const genderChart = ref(null);

onMounted(() => {
	// 确保 DOM 已经挂载
	if (departmentChart.value) {
		renderDepartmentChart();
	}
	if (costChart.value) {
		renderCostChart();
	}
	if (ageChart.value) {
		renderAgeChart();
	}
	if (abilityChart.value) {
		renderAbilityChart();
	}
	if (genderChart.value) {
		renderGenderChart();
	}
});

// 各部门人员统计 图表配置 (水平柱状图)
const renderDepartmentChart = () => {
	const chartDom = departmentChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
			},
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
			boundaryGap: [0, 0.01],
		},
		yAxis: {
			type: "category",
			data: [
				"党群监察部",
				"科技教育中心",
				"表述艺术中心",
				"视觉艺术中心",
				"校区管理部",
				"实践教育中心",
				"财务部",
				"人力资源部",
				"教学管理部",
				"办公室",
			],
		},
		series: [
			{
				name: "人数",
				type: "bar",
				data: [10, 15, 8, 12, 20, 18, 25, 30, 16, 22], // 示例数据，替换为你的数据
			},
		],
		color: "#007bff", // 柱状图颜色
	};

	myChart.setOption(option);
};

// 部门人力成本 图表配置 (水平柱状图)
const renderCostChart = () => {
	const chartDom = costChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
			},
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
			boundaryGap: [0, 0.01],
		},
		yAxis: {
			type: "category",
			data: [
				"党群监察部",
				"科技教育中心",
				"表述艺术中心",
				"视觉艺术中心",
				"校区管理部",
				"实践教育中心",
				"财务部",
				"人力资源部",
				"教学管理部",
				"办公室",
			],
		},
		series: [
			{
				name: "成本",
				type: "bar",
				data: [35, 35, 35, 35, 35, 35, 35, 35, 35, 35], // 示例数据，替换为你的数据
			},
		],
		color: "#28a745", // 柱状图颜色
	};

	myChart.setOption(option);
};

// 年龄、司龄、工龄结构 图表配置 (柱状图)
const renderAgeChart = () => {
	const chartDom = ageChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
			},
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "category",
			data: ["26岁以下", "26-30岁", "31-35岁", "35-40岁", "41-45岁", "46-50岁", "50岁以上"],
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				name: "人数",
				type: "bar",
				data: [100, 120, 150, 200, 180, 100, 50], // 示例数据，替换为你的数据
			},
		],
		color: "#dc3545", // 柱状图颜色
	};

	myChart.setOption(option);
};

// 能力结构统计 图表配置 (饼图)
const renderAbilityChart = () => {
	const chartDom = abilityChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c} ({d}%)",
		},
		legend: {
			orient: "vertical",
			left: "left",
		},
		series: [
			{
				name: "学历",
				type: "pie",
				radius: "70%",
				data: [
					{ value: 54.82, name: "本科" },
					{ value: 29.82, name: "本科以上" },
					{ value: 15.36, name: "本科以下" },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
				color: ["#ffc107", "#17a2b8", "#6c757d"], // 饼图颜色
			},
		],
	};

	myChart.setOption(option);
};

// 性别统计 图表配置 (饼图)
const renderGenderChart = () => {
	const chartDom = genderChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c} ({d}%)",
		},
		legend: {
			orient: "vertical",
			left: "left",
		},
		series: [
			{
				name: "性别",
				type: "pie",
				radius: "70%",
				data: [
					{ value: 67, name: "女性职员" },
					{ value: 33, name: "男性职员" },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
				color: ["#e83e8c", "#007bff"], // 饼图颜色
			},
		],
	};

	myChart.setOption(option);
};
</script>

<style scoped>
.dashboard {
	background-color: #f8f9fa;
	color: #495057;
	padding: 20px;
}

.dashboard-title {
	text-align: center;
	margin-bottom: 20px;
	color: #343a40;
}

.dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; /* 三列布局 */
	grid-gap: 20px;
}

/* 面板样式 */
.panel {
	background-color: #fff;
	border-radius: 5px;
	padding: 15px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.panel-title {
	font-size: 1.2rem;
	margin-bottom: 10px;
	color: #343a40;
}

/* 左侧区域样式 */
.left-area {
	/* 可以根据需要添加样式 */
}

/* 中间区域样式 */
.middle-area {
	/* 可以根据需要添加样式 */
}

/* 右侧区域样式 */
.right-area {
	/* 可以根据需要添加样式 */
}

/* 人员统计样式 */
.employee-stats {
}

.employee-count {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.employee-item {
	text-align: center;
}

.employee-number {
	font-size: 1.5rem;
	font-weight: bold;
	color: #007bff;
}

.employee-text {
	color: #6c757d;
}

/* 薪酬信息样式 */
.salary-info {
	display: flex;
	justify-content: space-around;
}

.salary-box {
	text-align: center;
}

.salary-title {
	font-size: 1rem;
	color: #6c757d;
}

.salary-amount {
	font-size: 1.3rem;
	font-weight: bold;
	color: #28a745;
}

/* 地图容器样式 */
.map-container {
}

.map {
	height: 200px; /* 根据需要调整高度 */
	border: 1px solid #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #6c757d;
}

/* 图表样式 */
.chart {
	height: 300px; /* 根据需要调整高度 */
}

/* 年龄、司龄、工龄样式 */
.age-stats {
}

.info-boxes {
	display: flex;
	justify-content: space-around;
	margin-bottom: 10px;
}

.info-box {
	text-align: center;
}

.info-label {
	color: #6c757d;
}

.info-value {
	font-size: 1.2rem;
	font-weight: bold;
	color: #17a2b8;
}

/* 性别统计样式 */
.gender-stats {
}
</style>
